<template>
  <!--  <HeaderDetail />-->
  <div style="margin: 10px 6% 0 6%">
    <el-row>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="search-card-title">Sequence Design</span>
            <el-col
              :span="4"
              :offset="12"
              style="text-align: end; padding-right:10px"
            >
              <el-button type="primary" @click="goReg()">SUBMIT</el-button>
              <el-button type="info" @click="goHistory">BACK</el-button>
            </el-col>
          </div>
        </template>
        <el-row style="margin-top: 10px">
          <el-col :span="6">
            <span>Seq Name:</span>
            <el-input v-model="searchInfo.name" style="width: 95%" readonly />
          </el-col>
          <el-col :span="6">
            <span>Type:</span>
            <el-select
              v-model="searchInfo.compound"
              style="width: 95%"
              placeholder="antibody"
              @change="
                getSequenceID(
                  searchInfo.projectCode,
                  searchInfo.compound
                )
              "
            >
              <el-option
                v-for="items in options1"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <span>Project Code:</span>
            <el-select
              v-model="searchInfo.projectCode"
              style="width: 95%"
              placeholder=""
              @change="
                getSequenceID(
                  searchInfo.projectCode,
                  searchInfo.compound
                )
              "
            >
              <el-option
                v-for="items in options3"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <span>Design Date:</span>
            <el-date-picker
              v-model="searchInfo.date"
              style="width: 95%"
              type="datetime"
              placeholder="Select date and time"
              format="YYYY-MM-DD"
              value-format="YYYYMMDD"
            />
          </el-col>
          <el-col :span="12" style="margin-top: 10px">
            <span>Description:</span>
            <el-input
              v-model="searchInfo.peptide"
              placeholder=""
              style="width: 98%"
            />
          </el-col>
          <!--<el-col :span="18" style="margin-top: 10px">
            <span>DNA Sequence:</span>
            <el-input
              v-model="searchInfo.nucleotides"
              placeholder="ATGCACAGCTCAGCTCTGCTGTGCTGCCTGGTGCTTCTGACCGGCGTGCGGGCCGAGGTTCAGCTGGTGCAGAGCGGAGCCGAAGTGAAAAAGAGCGGCGAGAGCCTGAAGATCAGCTGTAAAGGCAGCGGTTATAGCTTCACCAGCTACTGGATCGGCTGGGTGCGGCAGATGCCTGGAAAAGGCCTGGAATGGATGGGCATCTTCTACCCCGGCGACAGCTCTACCAGATACAGCCCTTCTTTTCAGGGCCAGGTGACCATTAGCGCTGATAAGTCTGTCAACACCGCCTATCTGCAGTGGTCCTCCCTGAAAGCCAGCGACACAGCCATGTACTACTGCGCCAGAAGGCGGAACTGGGGAAATGCCTTCGACATCTGGGGCCAAGGCACCATGGTGACAGTGTCCAGTGCTTCTACCAAAGGCCCCTCTGTGTTTCCACTGGCCCCTTCCAGCAAGTCCACATCTGGAGGCACCGCCGCCCTGGGATGTCTGGTCAAAGACTACTTCCCCGAGCCTGTGACCGTGTCCTGGAACAGCGGCGCCCTGACAAGCGGCGTGCACACCTTCCCTGCTGTGCTGCAAAGCAGCGGCCTGTATAGCCTGAGCAGCGTGGTGACAGTGCCTAGCAGCTCTCTCGGAACACAGACCTACATCTGCAACGTGAACCACAAGCCTTCTAATACCAAAGTGGATAAGCGGGTTGAGCCTAAGAGCTGCGACAAGACACACACATGTCCTCCGTGCCCCGCCCCTGAGCTACTGGGCGGCCCTAGCGTGTTCCTGTTCCCCCCCAAGCCTAAGGACACCCTGTACATCACCAGAGAGCCCGAAGTGACCTGTGTGGTGGTCGACGTGTCTCACGAAGATCCAGAGGTGAAGTTCAACTGGTACGTGGACGGCGTGGAAGTGCATAATGCCAAGACCAAGCCCAGAGAAGAGCAGTACAACAGCACATACAGAGTGGTGAGCGTGCTGACCGTGCTGCACCAGGACTGGCTGAACGGCAAGGAATACAAGTGCAAGGTGAGCAACAAGGCCCTGCCCGCTCCTATCGAGAAGACAATCAGCAAGGCCAAGGGACAACCTAGAGAGCCCCAGGTGTACACACTGCCTCCAAGCAGAGAGGAAATGACCAAAAACCAGGTTTCTCTGACCTGCCTGGTGAAGGGCTTCTACCCTTCCGATATCGCCGTCGAGTGGGAGAGCAACGGCCAGCCTGAAAACAACTACAAGACGACCCCTCCAGTGCTGGACAGCGATGGCTCTTTTTTCCTGTACAGCAAGCTGACAGTGGACAAGTCCAGATGGCAGCAGGGCAATGTGTTCAGCTGCAGCGTGATGCACGAGGCCCTGCACAACCACTACACCCAGAAGAGCCTGAGCCTGTCACCTGGCAAGTAATGA"
              type="textarea"
              style="width: 95%"
              readonly
            />
          </el-col>-->
        </el-row>
        <el-card class="box-card" style="margin-top: 10px">
          <template #header>
            <div class="card-header">
              <span class="search-card-title">Source Plasmid</span>
            </div>
          </template>
          <el-row>
            <el-col :span="6">
              <span>Source Plasmid (H):</span>
              <el-select
                      v-model="compound"
                      style="width: 95%"
                      placeholder="RV-PSA-p008"
              >
                <el-option
                        v-for="items in options"
                        :key="items.value"
                        :label="items.label"
                        :value="items.value"
                />
              </el-select>
            </el-col>
            <el-col :span="6">
              <span>Subtype (H):</span>
              <el-input
                      v-model="searchInfo.peptide"
                      placeholder="Human IgG1 M428L/N434S"
                      style="width: 95%"
              />
            </el-col>
            <el-col :span="12">
              <el-button type="warning" style="margin-top: 15px" @click="dialogVisible = true">Show Sequence</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <span>Source Plasmid (L):</span>
              <el-select
                      v-model="compound"
                      style="width: 95%"
                      placeholder="RV-PSA-p009"
              >
                <el-option
                        v-for="items in options"
                        :key="items.value"
                        :label="items.label"
                        :value="items.value"
                />
              </el-select>
            </el-col>
            <el-col :span="6">
              <span>Subtype (L):</span>
              <el-input
                      v-model="searchInfo.peptide"
                      placeholder="WT Human Kappa"
                      style="width: 95%"
              />
            </el-col>
            <el-col :span="12">
              <el-button type="warning" style="margin-top: 15px" @click="dialogVisible = true">Show Sequence</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-card>
    </el-row>

   <!-- <div v-if="geneList.length !== 0" style="margin-top: 10px">
      <el-tabs v-model="geneValue" type="border-card">
        <el-tab-pane
          v-for="item in geneList"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        >
            <el-table
              :data="tableData"
              border
              style="width: 100%;"
              :row-style="rowStyle"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="40">
                <template #default="scope">
                  <el-checkbox v-model="scope.row.isCheck" />
                </template>
              </el-table-column>
              <el-table-column property="name" label="Seq Name" />
              <el-table-column property="des" label="Description" />
              <el-table-column property="protein" label="Protein Sequence" />
              <el-table-column property="dna" label="DNA Sequence" />
            </el-table>
            <el-pagination
              v-model:currentPage="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 100, 200, 300, 400]"
              layout="total, sizes, prev, pager, next"
              :total="7"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          &lt;!&ndash;</div>&ndash;&gt;
        </el-tab-pane>
      </el-tabs>
    </div>-->
    <el-dialog
            v-model="dialogVisible"
            title="Show Sequence"
            width="50%"
            :before-close="handleClose"
    >
      <div>
        <el-row>
          <el-col :span="24">
            <span>Sequence:</span>
            <el-input
                    v-model="searchInfo.note"
                    placeholder="ATGCACAGCTCAGCTCTGCTGTGCTGCCTGGTGCTTCTGACCGGCGTGCGGGCCGAGGTTCAGCTGGTGCAGAGCGGAGCCGAAGTGAAAAAGAGCGGCGAGAGCCTGAAGATCAGCTGTAAAGGCAGCGGTTATAGCTTCACCAGCTACTGGATCGGCTGGGTGCGGCAGATGCCTGGAAAAGGCCTGGAATGGATGGGCATCTTCTACCCCGGCGACAGCTCTACCAGATACAGCCCTTCTTTTCAGGGCCAGGTGACCATTAGCGCTGATAAGTCTGTCAACACCGCCTATCTGCAGTGGTCCTCCCTGAAAGCCAGCGACACAGCCATGTACTACTGCGCCAGAAGGCGGAACTGGGGAAATGCCTTCGACATCTGGGGCCAAGGCACCATGGTGACAGTGTCCAGTGCTTCTACCAAAGGCCCCTCTGTGTTTCCACTGGCCCCTTCCAGCAAGTCCACATCTGGAGGCACCGCCGCCCTGGGATGTCTGGTCAAAGACTACTTCCCCGAGCCTGTGACCGTGTCCTGGAACAGCGGCGCCCTGACAAGCGGCGTGCACACCTTCCCTGCTGTGCTGCAAAGCAGCGGCCTGTATAGCCTGAGCAGCGTGGTGACAGTGCCTAGCAGCTCTCTCGGAACACAGACCTACATCTGCAACGTGAACCACAAGCCTTCTAATACCAAAGTGGATAAGCGGGTTGAGCCTAAGAGCTGCGACAAGACACACACATGTCCTCCGTGCCCCGCCCCTGAGCTACTGGGCGGCCCTAGCGTGTTCCTGTTCCCCCCCAAGCCTAAGGACACCCTGTACATCACCAGAGAGCCCGAAGTGACCTGTGTGGTGGTCGACGTGTCTCACGAAGATCCAGAGGTGAAGTTCAACTGGTACGTGGACGGCGTGGAAGTGCATAATGCCAAGACCAAGCCCAGAGAAGAGCAGTACAACAGCACATACAGAGTGGTGAGCGTGCTGACCGTGCTGCACCAGGACTGGCTGAACGGCAAGGAATACAAGTGCAAGGTGAGCAACAAGGCCCTGCCCGCTCCTATCGAGAAGACAATCAGCAAGGCCAAGGGACAACCTAGAGAGCCCCAGGTGTACACACTGCCTCCAAGCAGAGAGGAAATGACCAAAAACCAGGTTTCTCTGACCTGCCTGGTGAAGGGCTTCTACCCTTCCGATATCGCCGTCGAGTGGGAGAGCAACGGCCAGCCTGAAAACAACTACAAGACGACCCCTCCAGTGCTGGACAGCGATGGCTCTTTTTTCCTGTACAGCAAGCTGACAGTGGACAAGTCCAGATGGCAGCAGGGCAATGTGTTCAGCTGCAGCGTGATGCACGAGGCCCTGCACAACCACTACACCCAGAAGAGCCTGAGCCTGTCACCTGGCAAGTAATGA"
                    type="textarea"
                    autosize="true"
                    style="width: 95%"
            />
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import { defineComponent, ref } from "vue";
  // import HeaderDetail from "../../components/HeaderDetail.vue";
  // import barChart from "../../components/BarChar.vue";
  import { Download } from "@element-plus/icons-vue";
  import router from "@/router";
  export default {
    name: "MulSequenceDesign",
    components: {
      // HeaderDetail,
      // Download,
      // barChart
    },
    setup() {
        const goReg = () => {
            router.push("/designLibrary");
        };
        return {
            goReg,
        };
    },
    data () {
      return {
          dialogVisible: false,
          readonly: true,
          searchInfo: {
              name: "",
              date: "",
              compound: "",
              source: "",
              projectCode: "",
              time: "",
              cell: "",
              note: "",
              peptide: "",
              nucleotides: "",
          },
        compound: [],
        geneValue: "",
        geneList: [],
        currentPage: 1,
        pageSize: 10,
        options: [
            {
                value: "RV-PSA-p001",
                label: "RV-PSA-p001",
            },
            {
                value: "RV-PSA-p002",
                label: "RV-PSA-p002",
            },
            {
                value: "RV-PSA-p003",
                label: "RV-PSA-p003",
            },
            {
                value: "RV-PSA-p008",
                label: "RV-PSA-p008",
            },
            {
                value: "RV-PSA-p009",
                label: "RV-PSA-p009",
            }
        ],
          options1: [
            {
                value: "r",
                label: "antibody",
            },
            {
                value: "v",
                label: "vector",
            },
            {
                value: "m",
                label: "mRNA",
            },
        ],
            options2: [
            {
                value: "CRO",
                label: "CRO",
            },
            {
                value: "2",
                label: "Internal",
            },
        ],
            options3: [
            {
                value: "CDI",
                label: "CDI",
            },
            {
                value: "PSA",
                label: "PSA",
            },
        ],
        tableData: [
          {
              name: "H1",
              des: "IL10_HUMAN, Interleukin-10",
              protein: "MELGLSWIFLLAILKGVQC",
              dna: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
          },
          {
              name: "H2",
              des: "IL10_HUMAN, Interleukin-10",
              protein: "MELGLRWVFLVAILEGVQC",
              dna: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
          },
            {
                name: "H3",
                des: "IL10_HUMAN, Interleukin-10",
                protein: "MELGLRWVFLVAILEGVQC",
                dna: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
            },
            {
                name: "H4",
                des: "IL10_HUMAN, Interleukin-10",
                protein: "MELGLRWVFLVAILEGVQC",
                dna: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
            },
            {
                name: "H5",
                des: "IL10_HUMAN, Interleukin-10",
                protein: "MELGLRWVFLVAILEGVQC",
                dna: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
            },
            {
                name: "H6",
                des: "IL10_HUMAN, Interleukin-10",
                protein: "MELGLRWVFLVAILEGVQC",
                dna: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
            },
            {
                name: "IL10",
                des: "IL10_HUMAN, Interleukin-10",
                protein: "MHSSALLCCLVLLTGVRA",
                dna: "ATGCACAGCTCAGCTCTGCTGTGCTGCCTGGTGCTTCTGACCGGCGTGCGGGCC",
            },
        ],
      };
    },
    created () {
      this.compound = this.$route.params.gene;
      this.getPlot(this.compound);
    },
    methods: {
      getPlot (compound) {
        if (compound) {
          const geneList = [];
          compound.forEach(item => {
            geneList.push({
              name: item,
              isCollapse: 1
            });
          });
          this.geneList = geneList;
        }
      },
      handleSizeChange (val) {
        console.log(`${val} items per page`);
      },
      handleCurrentChange (val) {
        console.log(`current page: ${val}`);
      },
      rowStyle ({row, rowIndex}) {
        const stylejson = {};
        if (row.color) {
          stylejson.background = row.color;
        }
        return stylejson;
      },
        getSequenceID(projectCode, compound) {
            let name = "";
            if (projectCode && compound) {
                name = "RV" + "_" + projectCode + "_" + compound + "001";
            }
            this.searchInfo.name = name;
        },
        goHistory () {
            window.history.go(-1);
        },
        handleClose () {
            this.dialogVisible = false;
        }
    }
  };
</script>

<style scoped>
    .search-card-title {
        font-size: 16px;
        font-weight: 500;
    }
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .download-icon {
        position: relative;
        top: 3px;
        color: #166FE7;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .box-card {
        width: 100%;
    }
    .el-card /deep/.el-card__header {
        background-color: #64bce7;
        padding: 6px;
    }
    .el-card /deep/.el-card__body {
        padding: 8px;
    }
</style>
